<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>患者360视图系统</title>
    <link href="/wwwroot/elementui/theme-chalk/index.css" rel="stylesheet"/>
    <link href="/wwwroot/Styles/base.css" rel="stylesheet"/>
    <link href="/wwwroot/Styles/ui-base.css" rel="stylesheet"/>
    <link href="/wwwroot/iconfont/iconfont.css?v=100" rel="stylesheet"/>
    <link href="/wwwroot/Styles/font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet"/>
    <link href="/wwwroot/Styles/watermarkt.css" rel="stylesheet"/>
    <script src="/wwwroot/Vue/vue.min.js"></script>
    <script src="/wwwroot/Vue/vue-router.js"></script>
    <script src="/wwwroot/Vue/axios.min.js"></script>
    <script src="/wwwroot/Scripts/jquery-2.2.3.min.js"></script>
    <script src="/wwwroot/Scripts/base.js?dt=20201223"></script>
    <script src="/wwwroot/Scripts/xmlhelper.js"></script>
    <script src="/wwwroot/elementui/index.js?p=1"></script>
    <script src="/wwwroot/Scripts/echarts.min.js"></script>
    <script src="/wwwroot/Scripts/waterMark.js"></script>


    <style>
        .hospitalization .ulTable span:nth-child(1),
        .hospitalization .ulTable span:nth-child(5),
        .hospitalization .ulTable span:nth-child(6),
        .hospitalization .ulTable span:nth-child(7),
        .hospitalization .ulTable span:nth-child(8),
        .hospitalization .ulTable span:nth-child(10),
        .hospitalization .ulTable span:nth-child(12),
        .hospitalization .ulTable span:nth-child(9) {
            width: 4% !important;
        }

        .hospitalization .ulTable span:nth-child(2),
        .hospitalization .ulTable span:nth-child(3),
        .hospitalization .ulTable span:nth-child(11) {
            width: 10% !important;
        }

        .hospitalization .ulTable span:nth-child(4) {
            width: 14% !important;
        }

        .el-dialog {
            width: 580px;
        }

        .zuofei {
            background-color: #a1a3a6 !important;
        }
    </style>
    <style type="text/css">
        #app {
            height: 100%;
        }

        #app > .header {
            height: 30px;
            line-height: 30px;
            color: rgba(0, 0, 0, 0.54);
            font-size: 12px;
            font-family: "Microsoft YaHei";
        }

        #app > .header i {
            height: 20px;
            width: 5px;
            background-color: rgb(24, 144, 255);
            display: block;
            float: left;
            margin-right: 10px;
            margin-top: 5px;
            margin-left: 20px;
        }

        #app > .form li {
            list-style: none;
            float: left;
            width: calc(30% - 20px);
            padding-left: 20px;
            height: 30px;
            line-height: 30px;
        }

        #app > .form li span {
            font-size: 12px;
            color: rgb(114, 113, 113);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        #app > .title {
            clear: left;
            height: 30px;
            line-height: 30px;
            background-color: rgb(243, 243, 245);
        }

        #app > .ulTable span {
            padding-left: 20px;
            display: block;
            float: left;
            font-size: 12px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        #app .ulTable span:nth-child(1),
        #app .ulTable span:nth-child(5),
        #app .ulTable span:nth-child(6),
        #app .ulTable span:nth-child(7) {
            width: calc(12.5% - 20px);
        }

        #app .ulTable span:nth-child(2),
        #app .ulTable span:nth-child(3) {
            width: calc(15% - 20px);
        }

        #app .ulTable span:nth-child(4) {
            width: calc(20% - 20px);
        }

        .ulTable > li {
            list-style: none;
            height: 30px;
            line-height: 30px;
        }

        .ulTable > li:nth-child(odd) {
            background-color: rgb(247, 248, 249);
        }

        .ulTable > li:nth-child(even) {
            background-color: rgb(252, 252, 252);
        }

        .ulTable li span {
            float: left;
            color: rgb(114, 113, 113);
            font-size: 12px;
            padding-left: 20px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .ulTable li span i {
            margin-left: 20px;
            font-weight: bold;
        }

        .el-scrollbar {
            height: calc(100% - 120px);
        }
    </style>
</head>
<body>
<div id="app" class="hospitalization hospitalization-index" v-loading.fullscreen.lock="loading"
     element-loading-text="正在加载数据..." element-loading-background="transparent" v-cloak>
    <div class="header"><i></i>{{AdviceData.Hospitalization.DxDate|dateFormat}} {{AdviceData.Hospitalization.OPorIP}}
        {{AdviceData.Hospitalization.Department}} 医嘱信息
    </div>
    <ul class="form">
        <li><span>就诊类别：</span><span>{{AdviceData.Hospitalization.OPorIP}}&nbsp;</span></li>
        <li><span>主治医师：</span><span>{{AdviceData.Hospitalization.DxDoctorName}}&nbsp;</span></li>
        <li><span>诊断信息：</span><span>{{AdviceData.Hospitalization.HosDxName}}&nbsp;</span></li>
        <li><span>科室名称：</span><span>{{AdviceData.Hospitalization.Department}}&nbsp;</span></li>
        <li><span>病区名称：</span><span>{{AdviceData.Hospitalization.currentWard}}&nbsp;</span></li>
        <li><span>护理单元：</span><span>{{AdviceData.Hospitalization.currentNursingUnit}}&nbsp;</span></li>
    </ul>
    <div id="scrollBarTitle" class="scrollBarTitle" style="overflow:auto;height:calc(100% - 105px);">
        <div style="width:100%;">

            <div class="title ulTable" style="width:100%;">
                <span>医嘱类型</span>
                <!--                <span>医嘱ID</span>-->
                <span>开始时间</span>
                <span>停止时间</span>
                <span>医嘱名称</span>
                <span>药品剂量</span>
                <span>药品用法</span>
                <span>用药频次</span>
                <span>开嘱医生</span>
                <span>停嘱医生</span>
                <span>核对护士</span>
                <span>核对时间</span>
                <span>状态</span>
                <span>操作</span>
            </div>


            <div class="com-not-data" v-if="isNotData">
                暂无数据
            </div>

            <el-collapse accordion v-model="collapseValue" style=" clear:left;">
                <el-collapse-item v-for="(item,index) in AdviceData.AdviceInfo" :title="item.Title" :name="index">

                    <ul class="ulTable">
                        <li v-for="(child,cindex) in item.AdviceDetail"
                            :class="child.orderStatusName=='已作废'?'zuofei':''">
                            <span>{{child.OrderClassName}}</span>
                            <span>{{child.StartDtTm|dateFormat}}</span>
                            <span>{{child.StopDtTm|dateFormat}}&nbsp;</span>
                            <span :title="child.Name"><i :class="GroupBy(child,cindex,item.AdviceDetail)"></i>{{child.Name}}&nbsp;</span>
                            <span>{{child.DrugDose|formatFloat}}&nbsp;{{child.TotalDoseUnits}}</span>
                            <span>{{child.DrugUse}}&nbsp;</span>
                            <span>{{child.FrequencyDrugUse}}&nbsp;</span>
                            <span>{{child.OrderingDoctorName}}&nbsp;</span>
                            <span>{{child.RepeatIndicator==1?child.StopDoctorName:'--'}}&nbsp;</span>
                            <span>{{child.ReviewPerson}}&nbsp;</span>
                            <span>{{child.ReviewDtTm|dateFormat}}&nbsp;</span>
                            <span>{{child.orderStatusName}}</span>
                            <span><a v-on:click="FYHistory(child)" style="cursor:pointer;color:blue">相关费用</a></span>
                            <span><a v-on:click="ZXHistory(child)" style="cursor:pointer;color:blue">执行记录</a></span>
                        </li>
                    </ul>
                </el-collapse-item>
            </el-collapse>
        </div>
    </div>
    <el-dialog title="执行记录" :visible.sync="ZX.show" width="60%">
        <el-table :data="ZX.Data" height="600">
            <el-table-column property="orderExecId" label="执行ID"></el-table-column>
            <el-table-column property="execAction" label="执行动作" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column property="execEmpName" label="执行人"></el-table-column>
            <el-table-column property="orgNameExec" label="执行科室"></el-table-column>
            <el-table-column property="execTime" label="执行时间">
                <template slot-scope="scope">{{ scope.row.execTime | dateFormat }}</template>
            </el-table-column>
        </el-table>
    </el-dialog>
    <el-dialog title="费用明细" :visible.sync="FY.show" width="60%">
        <el-table :data="FY.Data" :summary-method="getSummaries" show-summary height="600">
            <el-table-column property="id" label="明细ID"></el-table-column>
            <el-table-column property="itemCode" label="项目编码"></el-table-column>
            <el-table-column property="itemName" label="项目名称"></el-table-column>
            <el-table-column property="amount" label="数量"></el-table-column>
            <el-table-column property="charges" label="金额"></el-table-column>
            <el-table-column property="chargeDate" label="费用时间" sortable>
                <template slot-scope="scope">{{ scope.row.chargeDate | dateFormat }}</template>
            </el-table-column>
        </el-table>
    </el-dialog>
</div>
</body>

<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data() {
            return {
                columns: [],
                AdviceData: {
                    Hospitalization: {},
                    AdviceInfo: []
                },
                ZX: {
                    show: false,
                    Data: []
                },
                FY: {
                    show: false,
                    Data: []
                },
                collapseValue: [0],
                loading: false,
                isNotData: true
            };
        },
        methods: {
            getHospitalization() {
                var _this = this;
                this.collapseValue = [];
                this.loading = true;
                clinBrain.request({
                    url: "/pms/query",
                    params: {
                        code: 'com.base.api.cdr.HospitalizationInfo',
                        params: {
                            patientId: clinBrain.getParam('patientId'),
                            OporIpVn: clinBrain.getParam("visitNumber"),
                            opOrIp: clinBrain.getParam("opOrIp"),
                            visitNumber: clinBrain.getParam("visitNumber")
                        }
                    }
                }, this).success(function (resp) {
                    _this.loading = false;
                    var AdviceDetail1 = resp.data.Data.filter(item => {
                        return item.RepeatIndicator == '0'
                    });
                    var AdviceDetail2 = resp.data.Data.filter(item => {
                        return item.RepeatIndicator == '1'
                    });
                    _this.AdviceData.AdviceInfo = [];
                    if (AdviceDetail1.length > 0) {
                        _this.AdviceData.AdviceInfo.push({
                            Title: '临时医嘱' + AdviceDetail1.length,
                            AdviceDetail: AdviceDetail1
                        });
                    }
                    if (AdviceDetail2.length > 0) {
                        _this.AdviceData.AdviceInfo.push({
                            Title: '长期医嘱' + AdviceDetail2.length,
                            AdviceDetail: AdviceDetail2
                        });
                    }
                    _this.isNotData = !resp.data.Data || resp.data.Data.length == 0;
                    for (var i = 0; i < _this.AdviceData.AdviceInfo.length; i++) {
                        _this.collapseValue.push(i)
                    }
                });
            },
            /**
             *判断分组
             */
            GroupBy(child, index, adviceDetail) {
                if (!child.OrderGroupNumber) return "group-by-none";
                var upChild = null;
                var dnChild = null;

                if (index != 0) {
                    upChild = adviceDetail[index - 1];
                    if (upChild.OrderGroupNumber != child.OrderGroupNumber) {
                        upChild = null;
                    }
                }
                if (index != adviceDetail.length - 1) {
                    dnChild = adviceDetail[index + 1];
                    if (dnChild.OrderGroupNumber != child.OrderGroupNumber) {
                        dnChild = null;
                    }
                }
                //前后分组都不一致
                if (!upChild && !dnChild) {
                    return "group-by-none";
                }
                if (upChild == null) {
                    return "group-by-up";
                }
                if (dnChild == null) {
                    return "group-by-dn";
                }
                return "group-by";
            },
            ///执行记录
            ZXHistory(item) {
                app.ZX.Data = [];
                app.ZX.show = true;

                clinBrain.request({
                    url: "/pms/query",
                    params: {
                        code: "com.base.api.cdr.HospitalizationInfoExec",
                        params: {
                            orderId: item.YZID
                        }
                    }
                }, this).success(function (resp) {
                    app.ZX.Data = resp.data.Data;

                });
            },

            //费用记录
            FYHistory(item) {
                app.FY.Data = [];
                app.FY.show = true;

                clinBrain.request({
                    url: "/pms/query",
                    params: {
                        code: "com.base.api.cdr.HospitalizationInfoBill",
                        params: {
                            orderId: item.YZID
                        }
                    }
                }, this).success(function (resp) {
                    app.FY.Data = resp.data.Data;
                });
            },

            getSummaries(param) {
                const {columns, data} = param
                const sums = []
                columns.forEach((column, index) => {
                    if (index === 0) {
                        sums[index] = '总计'
                    } else if (index === 4) {
                        const values = data.map(item => Number(item[column.property]))
                        if (!values.every(value => isNaN(value))) {
                            sums[index] = values.reduce((prev, curr) => {
                                const value = Number(curr)
                                if (!isNaN(value)) {
                                    return prev + curr
                                } else {
                                    return prev
                                }
                            }, 0)
                        } else {
                            sums[index] = 'N/A'
                        }
                    } else {
                        sums[index] = '--'
                    }
                })
                return sums
            },
            //闭环调阅
            jumpBH(item) {
                var cookieArr = document.cookie.split(';');
                var token = "";
                for (var i = 0; i < cookieArr.length; i++) {
                    if (cookieArr[i].indexOf("AccessToken") > -1) {
                        token = cookieArr[i].split('=')[1];
                        break;
                    }
                    if (cookieArr[i].indexOf("SSOServerUser=Token=") > -1) {
                        token = cookieArr[i].split('=')[2];
                        break;
                    }
                }
                var url = "";
                //检验医嘱
                if (item.Str2 == "4") {
                    url = "http://192.168.0.168:8010/CB_DoctorAdviceModule/LoopApi/Index?category=jybb&mainId=" + item.Str1 + "&listId=" + item.Str1 + "&token=" + token;
                }
                ///口服液医嘱
                else if (item.Str2 == "1" && item.Str3 == "P.O") {
                    url = "http://192.168.0.168:8010/CB_DoctorAdviceModule/LoopApi/Index?category=zyhzkfyybh&mainId=" + item.VisitNumber + "&listId=" + item.Str4 + "&token=" + token;
                }
                window.open(url);
            }
        },
        created: function () {
            this.loading = true;
            var _this = this;
            clinBrain.request({
                url: "/pms/query",
                params: {
                    code: "com.base.api.cdr.PersonalDiagnosis",
                    params: {
                        visitNumber: clinBrain.getParam("visitNumber"),
                        opOrIp: clinBrain.getParam("opOrIp")
                    }
                }
            }, this).success(function (resp) {
                _this.loading = false;
                _this.AdviceData.Hospitalization = resp.data.Data[0];
                _this.getHospitalization();
            });
        },
        filters: {
            dateFormat(val) {
                if (val) {
                    return new Date(val).format('yyyy-MM-dd hh:mm:ss');
                } else {
                    return '--'
                }
            },
            /**
             * 浮点数格式化
             */
            formatFloat(val) {
                if (!val) return val;
                return Math.floor(parseFloat(val) * 100) / 100;
            }
        }
    });
</script>
</html>


